<template>
  <div class="allsearch">
    <section class="search-content">
      <el-row style="width:100%;">
        <el-col :span="6">
          <el-autocomplete
            v-model="dropstate"
            :fetch-suggestions="querySearch"
            class="inline-input"
            placeholder="请输入名称或编号"
            style="width:65%;"
            @select="handleSelect"
          />
        </el-col>
        <el-col :span="3" :pull="2">
          <el-select v-model="value" placeholder="课程分类">
            <el-option :value="value">会计中级职称</el-option>
            <el-option :value="value">会计初级职称</el-option>
            <el-option :value="value">注册会计师</el-option>
          </el-select>
        </el-col>
        <el-col :span="3" :pull="2">
          <el-select v-model="status.value" placeholder="课程状态">
            <el-option
              v-for="item in status"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-col>
        <el-col :span="6" :pull="2">
          <el-button type="primary">搜索</el-button>
          <el-dropdown>
            <el-button type="primary">
              选择课程
              <i class="el-icon-arrow-down el-icon--right"/>
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <div style="padding:10px;">
                <el-radio-group v-model="radio">
                  <el-radio :label="1">普通课程</el-radio>
                  <el-radio :label="2">班级课程</el-radio>
                  <el-radio :label="3">会员课程</el-radio>
                </el-radio-group>
              </div>
            </el-dropdown-menu>
          </el-dropdown>
        </el-col>
        <el-col :span="6">
          <div style="width:100%">
            <el-button type="primary" size="medium" style="float:right;" @click="createSubject">创建课程</el-button>
          </div>
        </el-col>
      </el-row>
    </section>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: '',
      input: '',
      state: '',
      dropstate: '',
      restaurants: [],
      radio: 1,
      status: [
        {
          value: 'published',
          label: '已发布'
        },
        {
          value: 'draft',
          label: '未发布'
        },
        {
          value: 'closed',
          label: '已关闭'
        }
      ],
      typestatus: [
        {
          label: '普通课程',
          value: 'common'
        },
        {
          label: '班级课程',
          value: 'classroom'
        },
        {
          label: '会员课程',
          value: 'vip'
        }
      ]
    }
  },
  mounted() {
    this.restaurants = this.loadAll()
  },
  methods: {
    createSubject() {
      this.$router.push('/subject/cresubject')
    },
    querySearch(queryString, cb) {
      var restaurants = this.restaurants
      var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants
      // 调用 callback 返回建议列表的数据
      cb(results)
    },
    createFilter(queryString) {
      return (restaurant) => {
        return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0)
      }
    },
    loadAll() {
      return [
      ]
    },
    handleSelect() {
      console.log('11')
    }
  }
}
</script>

<style lang="scss" scoped>
.allsearch {
  margin-top: 0px;
  margin-bottom: 20px;
  padding: 0;
  .search-content {
    width: 100%;
  }
}
</style>

